<template>
  <div class="body">
    <div class="bg">
      <img src="../style/img/about_us_bg.png" alt="">
      <div class="t-name">
        <p class="name1">
          WeYouth
        </p>
        <p class="name2">青年的专属平台</p>
      </div>
    </div>
    <div class="title">
      <p class="content-head">
        关于我们
      </p>
      <div class="content-text">
        <p>服務青年團體</p>
        <p>為香港區青年聯盟成員和友好團體提供會員管理、活動推廣等多項功能的線上平台。團體會員一經註冊，即可享有“管理會員、一鍵群發、管理活動、單獨網頁、推介推廣、資源共享”等六大權益。</p>
        <br>
        <br>
        <p>服務青年人</p>
        <p>經系統註冊的會員通過平台可瀏覽和報名參加活動，關注各團體最新動態，使用平台的個人「唯優VIP卡」享用陸續新增的各類商戶產品或服務優惠！</p>
        <br>
        <br>
        <p>以“聯繫好團體、關愛好青年”為目標，為青年人的學業、就業和創業提供一個全方位資源共享的平台。</p>
        <p>我們歡迎友好團體入駐。如有任何查詢，可聯繫微信號：weyouthWY。</p>
      </div>
    </div>
    <div class="footer">
      <div class="footer-head">
        <span style="font-weight:600;">Weyouth</span>&nbsp;&nbsp;|&nbsp;&nbsp;
        <span>青年社团管理</span>
      </div>
      <div class="footer-body">
        <div class="tab" @click="nav(1)">首页</div>
        <div class="tab" @click="nav(2)">发现活动</div>
        <div class="tab" @click="nav(3)">社团管理</div>
        <div class="tab" @click="nav(4)">联系我们</div>
      </div>
      <div class="footer-foot">
        <span>@2019 Weyouth CopyRight</span>
      </div>
    </div>
  </div>
</template>

<script>
// import { logout } from '@/api/login'
export default {
  name: 'AboutUs',
  methods: {
    nav (n) {
      switch (n) {
        case 1: this.$router.push('/')
          break
        case 2: this.$router.push('/activity_list')
          break
        case 3: this.$router.push('/member_center')
          break
        case 4: this.$router.push('/')
          break
      }
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.body {
  height: 100%;
  width: 100%;
  background: #fff;
  min-height: 700px;
  overflow-y: hidden;
  margin: 0 auto;
}
.bg {
  width: 100%;
  height: 201px;
}
.bg img {
  width: 100%;
  height: 201px;
}
.t-name {
  width: 80%;
  position: absolute;
  z-index: 999;
  top: 72px;
  font-weight: bold;
  color: white;
  left: 20px;
}
.name1 {
  font-size: 48px;
}
.name2 {
  font-size: 20px;
}
.title {
  width: 70%;
  margin-left: 10%;
  text-align: left;
  padding-top: 10%;
  padding-bottom: 10%;
}
.content-head {
  border-top:2px solid #ccc;
  font-size: 18px;
  font-weight: 600;
  width: 100px;
  margin-bottom: 10px;
}
.content-text {
  font-size: 14px;
  font-weight: 600;
}
.footer {
  position: relative;
  background: rgba(250, 175, 111, 1);
  width: 100%;
  height: 99px;
  padding-left: 10%;
  padding-top: 3%;
  color: #fff;
}
.footer-head {
  font-weight: bold;
}
.footer-body{
  width: 80%;
  height: 40px;
  line-height: 30px;
  display: flex;
  padding: 8px;
  justify-content: center;
  align-items: center;
  text-align: end;
  position: relative;
  right: 12%;
  font-weight: bold;
}
.tab{
  width: 25%;
}
.footer-foot {
  font-size:8px;
}
</style>
